import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:garbage_classification/global.dart';
import 'package:garbage_classification/main_manager.dart';
import 'package:garbage_classification/pages/result.dart';
import 'package:garbage_classification/utils/utils.dart';
import 'package:provider/provider.dart';

class SearchPage extends StatefulWidget {
  SearchPage({Key key}) : super(key: key);
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  @override
  void initState() {
    super.initState();
  }

  List<Widget> getListWidgets(data, mainManager) {
    List<Widget> _childrenList = [];
    List.generate(data.length, (index) {
      String _str = json.encode(data[index]);
      final song = json.decode(_str);
      if (song.toString() != "") {
        _childrenList.add(
          InkWell(
            child: Container(
              padding: EdgeInsets.fromLTRB(10, 3, 10, 3),
              decoration: BoxDecoration(
                color: Global.fontSecondColor.withOpacity(0.2),
                borderRadius: BorderRadius.circular(20),
              ),
              child: Text(
                song.toString(),
                style: TextStyle(
                  color: Global.fontColor,
                  fontSize: 12,
                ),
              ),
            ),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => ResultPage(
                    keyword: song.toString(),
                  ),
                ),
              );
              if (!mainManager.historyList.contains(song.toString())) {
                mainManager.historyList.insert(0, song.toString());
                mainManager.update(history: mainManager.historyList);
              }
            },
          ),
        );
      }
    });

    return _childrenList;
  }

  @override
  Widget build(BuildContext context) {
    MainManager mainManager = Provider.of<MainManager>(context);
    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Stack(
          children: [
            Container(
              decoration: BoxDecoration(color: Global.backgroundColor),
              child: Image.asset(
                'assets/images/bg.png',
                width: MediaQuery.of(context).size.width,
              ),
            ),
            Positioned(
              top: MediaQuery.of(context).size.width - 160,
              left: 50,
              child: InkWell(
                onTap: () {
                  Navigator.push(
                    context,
                    new MaterialPageRoute(builder: (context) => ResultPage()),
                  );
                },
                child: Container(
                  width: MediaQuery.of(context).size.width - 100,
                  height: 50,
                  decoration: BoxDecoration(
                    color: Global.backgroundColor,
                    borderRadius: BorderRadius.circular(5),
                    boxShadow: [
                      BoxShadow(
                        offset: Offset(0, 5),
                        color: Global.fontSecondColor.withOpacity(0.5),
                        blurRadius: 10,
                      )
                    ],
                  ),
                  child: Row(
                    children: [
                      SizedBox(width: 10),
                      Expanded(
                        child: Text(
                          "请输入需要查询的垃圾名称",
                          style: TextStyle(
                            color: Global.fontSecondColor,
                            fontSize: 14,
                          ),
                        ),
                      ),
                      Container(
                        width: 50,
                        height: 50,
                        decoration: BoxDecoration(
                          color: Global.mainColor,
                          borderRadius: BorderRadius.only(
                            topRight: Radius.circular(5),
                            bottomRight: Radius.circular(5),
                          ),
                        ),
                        child: Icon(
                          Icons.search,
                          color: Global.backgroundColor,
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
            Positioned(
              top: MediaQuery.of(context).size.width - 90,
              child: Container(
                child: SingleChildScrollView(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      (mainManager.historyList.length > 0 &&
                              mainManager.historyList[0] != '')
                          ? Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: <Widget>[
                                Row(
                                  children: [
                                    SizedBox(width: 10),
                                    Text(
                                      "历史搜索",
                                      style: TextStyle(
                                        color: Global.fontSecondColor,
                                        fontSize: 17,
                                      ),
                                    ),
                                    InkWell(
                                      onTap: () {
                                        Utils.showConfirmDialog(
                                          context: context,
                                          content: '确认清空历史搜索？',
                                          confirmCallback: () {
                                            mainManager.delete();
                                          },
                                          showCancelButton: true,
                                        );
                                      },
                                      child: Container(
                                        width: 80,
                                        child: Icon(
                                          Icons.delete,
                                          color: Global.fontSecondColor,
                                          size: 18,
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                                Container(
                                  width: MediaQuery.of(context).size.width,
                                  padding: EdgeInsets.fromLTRB(10, 13, 10, 13),
                                  child: Wrap(
                                    spacing: 5,
                                    runSpacing: 10,
                                    children: getListWidgets(
                                        mainManager.historyList, mainManager),
                                  ),
                                ),
                              ],
                            )
                          : Container(),
                      Row(
                        children: [
                          SizedBox(width: 10),
                          Text(
                            "近期热搜",
                            style: TextStyle(
                              color: Global.fontSecondColor,
                              fontSize: 17,
                            ),
                          )
                        ],
                      ),
                      Container(
                        width: MediaQuery.of(context).size.width,
                        padding: EdgeInsets.fromLTRB(10, 13, 10, 13),
                        child: Wrap(
                          spacing: 5,
                          runSpacing: 10,
                          children: getListWidgets(
                              mainManager.resouList, mainManager),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}
